<template>
    <div class="gps" id="gps">
       <div class='header'>公墓信息</div>
       
       <baidu-map :style="{width:map.width,height:map.height}" class="map" ak="HPdaWpgxB4G2X6tozwtgYaVI"  :zoom="map.zoom" :center="{lng: map.center.lng, lat: map.center.lat}" @ready="handler" :autoLocation="true" :scroll-wheel-zoom="true">
            <bm-geolocation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" :showAddressBar="true" :autoLocation="true" ></bm-geolocation>   
            <!--比例尺控件-->
            <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
            <!--缩放控件-->
            <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" ></bm-navigation>
            <!--聚合动态添加的点坐标-->
            <!--bm-marker-clusterer :averageCenter="true"-->
                <bm-marker v-for="(marker,index) in markers"  :key="index"  :position="{lng: marker.gcm_ex11, lat: marker.gcm_ex12}" @click="lookDetail(marker)" >
                    
                    <bm-label :content="marker.gcm_ex1" :labelStyle="{color: '#000', fontSize : '14px'}" :offset="{width: 0, height: -26}"/>
    
                </bm-marker>
            <!--/bm-marker-clusterer-->
            <!--信息窗体-->
            <bm-info-window :position="{lng: infoWindow.info.gcm_ex11, lat: infoWindow.info.gcm_ex12}" title="公墓信息" :show="infoWindow.show" @close="infoWindowClose" @open="infoWindowOpen">
                <div class='info_main'>
                    <div class='info_content_left'>
                        <div><span class="info_left">公墓名称：</span><span class="info_right">{{infoWindow.info.gcm_ex1}}</span></div>
                        <div><span class="info_left">联系人：</span><span class="info_right">{{infoWindow.info.gcm_ex3}}</span></div>
                        <div><span class="info_left">联系电话：</span><span class="info_right">{{infoWindow.info.gcm_ex4}}</span></div>
                        <div><span class="info_left">公墓地址：</span><span class="info_right">{{infoWindow.info.gcm_ex2}}</span></div>
                    </div>
                    <div class='info_content_right'>
                        <span @click="openGj(infoWindow)">到这来去</span>
                    </div>
                </div>
                
            </bm-info-window>
        </baidu-map>

        <el-dialog
            title="路线规划"
            :visible.sync="dialogVisible"
            style="height:70VH"
            width="80%">
            <div class='dialog_main'>
                <div class='dialog_left'>
                    <div class="searchAddress">
                       <el-input v-model="searchAddress" placeholder="起始地址"></el-input>
                        <el-button type="text" @click="searchMap">搜索</el-button>
                    </div>
                    
                    <baidu-map v-if="(showLx&&searchAddress2)" :style="{width:'100%',height:'70VH'}" class="map" ak="HPdaWpgxB4G2X6tozwtgYaVI" :zoom="16" :center="{lng: my.lng, lat: my.lat}"  :scroll-wheel-zoom="true"  @ready="handler2">
                        <!--比例尺控件-->
                        <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
                        <!--缩放控件-->
                        <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" ></bm-navigation>
                        <!--聚合动态添加的点坐标-->
                    
                    
                        <bm-driving
                        :start="searchAddress2"
                        :end="{lng:endMarker.gcm_ex11,lat:endMarker.gcm_ex12}"
                    
                        :auto-viewport="true"
                        ></bm-driving>
                        <bm-view class="map">
                        </bm-view>
                    </baidu-map>
                    <baidu-map v-else  :style="{width:'100%',height:'70VH'}" class="map" ak="HPdaWpgxB4G2X6tozwtgYaVI" :zoom="16" :center="{lng: my.lng, lat: my.lat}"  :scroll-wheel-zoom="true"  @ready="handler2">
                        <!--比例尺控件-->
                        <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
                        <!--缩放控件-->
                        <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" ></bm-navigation>
                        <!--聚合动态添加的点坐标-->
                    
                    
                        <bm-driving
                        :start="{lng:my.lng,lat:my.lat}"
                        :end="{lng:endMarker.gcm_ex11,lat:endMarker.gcm_ex12}"
                    
                        :auto-viewport="true"
                        ></bm-driving>
                        <bm-view class="map">
                        </bm-view>
                    </baidu-map>
                </div>
                <div class='dialog_right'>
                    <baidu-map  v-if="(showLx&&searchAddress2)"  :style="{width:'100%',height:'70VH'}" class="map" ak="HPdaWpgxB4G2X6tozwtgYaVI" :zoom="16" :center="{lng: my.lng, lat: my.lat}"  :scroll-wheel-zoom="true"  @ready="handler2">
                        <!--比例尺控件-->
                        <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
                        <!--缩放控件-->
                        <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" ></bm-navigation>
                        <!--聚合动态添加的点坐标-->
                    
                    
                        <bm-driving
                        :start="searchAddress2"
                        :end="{lng:endMarker.gcm_ex11,lat:endMarker.gcm_ex12}"
                    
                        :auto-viewport="true"
                        ></bm-driving>
                        <!--bm-view class="map">
                        </bm-view-->
                    </baidu-map>
                    <baidu-map v-else :style="{width:'100%',height:'70VH'}" class="map" ak="HPdaWpgxB4G2X6tozwtgYaVI" :zoom="16" :center="{lng: my.lng, lat: my.lat}"  :scroll-wheel-zoom="true"  @ready="handler2">
                        <!--比例尺控件-->
                        <bm-scale anchor="BMAP_ANCHOR_TOP_RIGHT"></bm-scale>
                        <!--缩放控件-->
                        <bm-navigation anchor="BMAP_ANCHOR_BOTTOM_RIGHT" ></bm-navigation>
                        <!--聚合动态添加的点坐标-->
                    
                    
                        <bm-driving
                        :start="{lng:my.lng,lat:my.lat}"
                        :end="{lng:endMarker.gcm_ex11,lat:endMarker.gcm_ex12}"
                    
                        :auto-viewport="true"
                        ></bm-driving>
                        <!--bm-view class="map">
                        </bm-view-->
                    </baidu-map>
                </div>

                    
                
                
            </div>
            <span slot="footer" class="dialog-footer">
                <el-button @click="dialogVisible = false">取 消</el-button>
                <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
            </span>
        </el-dialog>

        <el-drawer
        title="路线规划"
        :visible.sync="drawer">
            <div>
                <baidu-map>
                    <bm-view class="map">
                    </bm-view>
                    <bm-driving
                    start="新街口"
                    end="新街口"
                    startCity="北京"
                    endCity="南京"
                    :auto-viewport="true"
                    :waypoints="['呼和浩特', {lng: 112.53, lat: 37.87}, '陕西兵马俑']"></bm-driving>
                </baidu-map>
            </div>
        </el-drawer>
    </div>
</template>

<script>

    //百度地图
    import BaiduMap from 'vue-baidu-map/components/map/Map.vue'
    import BmScale from 'vue-baidu-map/components/controls/Scale'
    import BmNavigation from 'vue-baidu-map/components/controls/Navigation'
    import BmMarkerClusterer from  'vue-baidu-map/components/extra/MarkerClusterer'
    import BmMarker from 'vue-baidu-map/components/overlays/Marker'
    import BmLabel from 'vue-baidu-map/components/overlays/Label'
    import BmInfoWindow from 'vue-baidu-map/components/overlays/InfoWindow'
    import BmPolyline from 'vue-baidu-map/components/overlays/Polyline'
    import BmlLushu from 'vue-baidu-map/components/extra/Lushu'
    import { BMPGL } from "@/utils/bmpgl.js"
    import {BmDriving,BmView,BmGeolocation} from "vue-baidu-map";
    export default {
        components: {
            BmLabel,
            BaiduMap,
            BmScale,
            BmNavigation,
            BmMarkerClusterer,
            BmMarker,
            BmInfoWindow,
            BmPolyline,
            BmlLushu,
            BmDriving,
            BmView,
            BmGeolocation
        },
        data() {
            return {
                drawer:false,
                dialogClickIndex:0,
                icon: {
                    url: '/rootImg/icon/car9.png',
                    size: {width: 12, height: 9},
                },
                icon2: {
                    url: '/rootImg/icon/car6.png',
                    size: {width: 52, height: 21},
                    opts: {anchor: {width: 27, height:13}}
                },
                iconend: {
                    url: '/rootImg/icon/end.png',
                    size: {width: 52, height: 46}
                },
                iconstart: {
                    url: '/rootImg/icon/start.png',
                    size: {width: 52, height: 52}
                },
                startMarker:{
                    lng:"",
                    lat:""
                },
                endMark:{
                    lng:"",
                    lat:""
                },
                map:{
                    center: {lng: 120.153576,lat:30.287459},//'杭州市',
                    zoom: 12,
                    width:'100%',
                    height:'100%'
                },
                searchAddress:"",
                searchAddress2:"",
                showLx:true,
                markers:[],
                /*markers:[{
                    label:"<span style='padding-left:5px;padding-right:5px;color:#2b46aa'>油量异常</span>",
                    name:"<span class='map_yj'>车辆信息(报警)</span>",
                    lng:120.158102,
                    lat:30.269247,
                    icon:"http://8.136.193.200:8888/rootImg/icon/car3.png",
                    icon_w:52,
                    icon_h:21,
                    car:"浙A00001",
                    sj:"",
                    address:"",
                    speep:"0",
                    remark:"油量异常"
                },{
                    label:"<span style='padding-left:5px;padding-right:5px;color:#9723b0'>速度80KM/h</span>",
                    name:"<span class='map_title'>车辆信息（运行中）</span>",
                    lng:120.177469,
                    lat:30.316108,
                    icon:"http://8.136.193.200:8888/rootImg/icon/car7.png",
                    icon_w:52,
                    icon_h:21,
                    car:"浙A00002",
                    sj:"张三(1611111111)",
                    address:"杭州市保俶路",
                    speep:"80km/h",
                    remark:""
                },{
                    label:"<span style='padding-left:5px;padding-right:5px;color:red'>停止</span>",
                    name:"<span class='map_title'>车辆信息（停止）</span>",
                    lng:120.073214,
                    lat:30.293449,
                    icon:"http://8.136.193.200:8888/rootImg/icon/car6.png",
                    icon_w:52,
                    icon_h:21,
                    car:"",
                    sj:"",
                    address:"",
                    speep:"0km/h",
                    remark:""
                }],*/
                infoWindow: {
                    lng:0,
                    lat:0,
                    show: false,
                    info:{
                        id:"",
                        name:"车辆信息",
                        car: "",
                        sj:"",
                        address:"",
                        speep:"",
                        status:"",
                        lng:"",
                        lat:"",
                        remark:""
                       
                    },
                },
                activeName: '',
                total:0,
                yd:0,
                bj:0,
                jz:0,
                dialogVisible:false,
                lineList:[],
                lineList2:[],
                dialogLeft:[],
                msgList:[],
                my:{
                    lng:"",
                    lat:""
                },
                endMarker:{}
            }
        },
        created() {
            

            if(this.$route.query.lng){
                this.map.center.lng=this.$route.query.lng;
            }
            if(this.$route.query.lat){
                this.map.center.lat=this.$route.query.lat;
            }
            this.loadMarker();
            let sef=this;
            window.setInterval(function(){
                sef.loadMarker();
            },15000)
        },
        mounted() {
            this.leftHeight=document.body.clientHeight+'px';
            this.containerHeight=document.body.clientHeight+'px';
        },
        methods: {
            searchMap(){
                this.showLx=false;
                this.searchAddress2=this.searchAddress
                this.showLx=true;
            },
            infoWindowClose (e) {
                this.infoWindow.show = false
            },
            infoWindowOpen (e) {
                this.infoWindow.show = true
            },
            //查看详情
            lookDetail(data, target){
                // console.log('data',data)
                this.infoWindow.show =true;
                this.infoWindow.info=data;
                this.activeName = data.name;
                // let This=this;
                //为弹窗口标题添加title
                /*this.$nextTick(()=>{
                    var win=document.querySelector(".BMap_bubble_title");
                    win.title = this.activeName;
                })*/
                if(target=='left'){ //点击的是左侧列表项，则不需要滚动
                    this.map.center={lng: data.lng, lat: data.lat};
                    this.map.zoom = 15;
                    return;
                }
                //滚动到指定元素位置
                this.$nextTick(()=>{
                    var obj=document.querySelector(".active");
                    var scrollTop=obj.offsetTop;
                    this.$refs.box.scrollTop=scrollTop-180;
                })
            },
            //地图初始化
            handler ({BMap, map}) {
                console.log(BMap, map)
                // this.map.center.lng = 118.802422
                // this.map.center.lat = 32.065631
                // this.map.zoom = 12;
                this.map.width= document.getElementById("gps").clientWidth-+'px';
                this.map.height=(document.body.clientHeight-120)+'px';

                let that=this;
                var geolocation = new BMap.Geolocation();
                geolocation.getCurrentPosition(function(r){
                    console.log(r);
                    that.my.lng=r.longitude;
                    that.my.lat=r.latitude
                   
                },{enableHighAccuracy: true})
               // this.getProPositionMap();
            },
            loadMarker(){
                if(sessionStorage.getItem("token")){
                    this.$post("bygex","/tzweixin/getCemeteryInfo",{}).then(data=>{
                        let data_=data.data;
                        this.markers=data.data;
                        this.total=data.total;
                        this.jz=data.jz;
                        this.yd=data.yd;
                        this.bj=data.bj;
                         
                        
                    }).catch(err=>{
                        console.log(err)
                    })
                }
                
            },
            openGj(item){
                this.dialogVisible=true;
                let id=item.info.id;
                this.endMarker=item.info
               // this.loadDialogLeft(id);
            },
            openGj2(item){
                this.dialogVisible=true;
                let id=item.id;
               
                this.loadDialogLeft(id);
            },
            loadDialogLeft(id){
                this.$post("business","/gps/getDevicesDetail",{id:id}).then(data=>{
                    this.dialogLeft=data;
                    if(this.dialogLeft.length>0){
                        let start=this.dialogLeft[0].startDate;
                        let end=this.dialogLeft[0].endDate;
                        this.loadHistory(id,start,end)
                    }
                })
            },
            loadDialogRight(item,index){
                this.dialogClickIndex=index;
                this.loadHistory(item.id,item.startDate,item.endDate);
            },
            loadHistory(id,startDate,endDate){
                this.$post("business","/gps/getDevicesHistory",{id:id,startDate:startDate,endDate:endDate}).then(data=>{
                    this.lineList=data;
                    if(data.length>0){
                        this.startMarker.lng=data[0].lng;
                        this.startMarker.lat=data[0].lat;
                        this.endMark.lng=data[data.length-1].lng;
                        this.endMark.lat=data[data.length-1].lat;

                        
                    }
                    this.lineList2=[];
                    for(let i=1;i<this.lineList.length-2;i++){
                        this.lineList2.push(this.lineList[i])
                    }
                     
                    console.log(this.lineList)
                })
            },
            handler2({ BMap, map }){
                console.log("2-----------------------------------------------")
                let sef=this;
               /* BMPGL("HPdaWpgxB4G2X6tozwtgYaVI").then((BMapGL) => {
                     var point = [];
                    for (var i = 0; i < sef.lineList2.length; i++) {
                        point.push(new BMapGL.Point(sef.lineList2[i].lng, sef.lineList2[i].lat));
                    }
                    var pl = new BMapGL.Polyline(point);
                    var trackAni = new BMapGLLib.TrackAnimation(map, pl, {
                        overallView: true,
                        tilt: 30,
                        duration: 20000,
                        delay: 300
                    });
                    trackAni.start();
                });*/
               
            },
            showMap(item){
                if(item.lng&&item.lat&&item.status!="未启用"){
                    this.map.center.lng=item.lng;
                    this.map.center.lat=item.lat;
                }
                
                this.drawer =false;
            }
        }
    }
</script>
<style scoped>
.gps{
    width:100%;
    height:100%;
    overflow: hidden;
}
.info_left{
    color:slategray;
    font-size:14px;
}
.info_right{
    font-size:14px;
}
.info_main{
    display:flex;
    flex-direction: row;
}
.info_content_left{
    flex:1;
    min-width: 160px;
}
.info_content_right{
    width:140px;
    font-size:14px;
    display:flex;
    justify-content:flex-end;
    align-items: center;
    color:teal;
}
.info_content_right span{
    cursor: pointer;
}
.info_remark{
    color:red;
}
.header{
    line-height: 65px;
    height:65px;
    width:100%;
    position:absolute;
    top:0;
    left:0;
    text-align: center;
    z-index: 100;
    font-size:35px;
    font-weight: bold;
    color:#000;
    background:rgb(0, 0, 0,0.2);
    font-family: PingFangSC-Heavy, PingFang SC;
}
.bottom{
    height:180px;
    width:250px;
    position: absolute;
    bottom:0;
    left:0;
    z-index: 100;
    background: rgb(255, 255, 255,0.8);
    color:#000;
    padding:5px;
}
.bottom_header{
    font-family: PingFangSC-Heavy, PingFang SC;
    color:#000;
    text-align:center;
    margin-bottom: 10px;;
    font-size:16px;
    font-weight: bold;
}
.bottom_image{
    display:flex;
    flex-direction: row;
    justify-content: space-between;
}
.bottom_image_item{
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size:14px;
}
.dialog_main{
    display: flex;
    flex-direction: row;
}
.dialog_right{
    flex:1;
}
.dialog_left{
    width:200px;
    overflow:auto;
}
.dialog_left_item{
    padding:5px;
    border-bottom:1px solid #ddd;
    cursor:pointer;
}
.dialog_left_item:hover{
    background:#3687e1;
    color:#fff;
}
.dialog_left_active{
    background:#3687e1;
    color:#fff;
}
.car_item{
    cursor: pointer;
    padding:10px;
    border-bottom:1px solid #ddd;
    display:flex;
    flex-direction: row;
}
.car_item_text{
    flex:1;
}
.car_item_title{
    font-size:16px;
    font-weight: bold;;
}
.car_item:hover{
    background:#3687e1;
    color:#fff;
}
.gps >>> .el-drawer{
    width:30% !important;
}
.el-dialog__wrapper{
    overflow:hidden;
}
.el-dialog__wrapper >>>.el-dialog{
    height:95%;
}
.dialog_main{
    height:100%;
    overflow:hidden;
}
</style>
<style>
.BMap_bubble_title{
   
}
.map_yj{
    color:red;
    font-weight: bold;
}
.map_title{
    font-weight: bold;
}
.anchorBL{
    display:none;
}
</style>